<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="preconnect" href="//cdn.w3cbus.com">
    <link rel="preconnect" href="//cdn.jsdelivr.net">
    <title>HServer-APM</title>
    <link
            rel="stylesheet"
            href="/css/mdui.min.css"
    />
    <script
            src="/js/mdui.min.js"
    ></script>
    <script>var $ = mdui.$;</script>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>

    <style>
        #app {
            margin: 10px;
        }
    </style>

</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar  mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">
<header class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
              mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
        <a href="index.html" class="mdui-typo-headline mdui-hidden-xs">HServer-APM</a>
    </div>
</header>

<div class="mdui-drawer" id="main-drawer">
    <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
                <div class="mdui-list-item-content">
                    <a href="index.html">服务大盘</a>
                </div>
            </div>
        </div>
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
                <div class="mdui-list-item-content"><a href="request.html">请求记录</a></div>
            </div>
        </div>
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
                <div class="mdui-list-item-content"><a href="log.html">请求日志</a></div>
            </div>
        </div>
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
                <div class="mdui-list-item-content"><a href="config.html">APM配置</a></div>
            </div>
        </div>
    </div>
</div>

<div class="mdui-panel" mdui-panel>
    <div id="app">
        <div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="上次执行">
                    <el-input disabled v-model="form.time"></el-input>
                </el-form-item>
                <el-form-item label="历史清除">
                    <el-input v-model="form.day"></el-input>
                </el-form-item>
                <el-form-item label="定时删除">
                    <el-switch v-model="form.switchBoolean"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即设置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div style="display: flex;justify-content: space-evenly;; padding: 10px">

            <el-card class="box-card" v-for="(info, index) in infos" :key="index" style="padding: 10px">
                <div> 表名:{{info.ns}}</div>
                <div> 大小:{{(info.size / 1024 / 1024).toFixed(2)}} MB</div>
                <div> 文档数:{{info.count}}</div>
                <div> 平均大小:{{(info.avgObjSize / 1024 / 1024).toFixed(2)}}MB</div>
                <div>存储大小:{{(info.storageSize / 1024 / 1024).toFixed(2)}}MB</div>
                <div>免费存储大小:{{(info.freeStorageSize / 1024 / 1024).toFixed(2)}} MB</div>
                <div> 总共索引大小:{{(info.totalIndexSize / 1024 / 1024).toFixed(2)}} MB</div>
                <div> 总大小:{{(info.totalSize / 1024 / 1024).toFixed(2)}} MB</div>
            </el-card>
        </div>

    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                infos: [],
                form: {
                    day: '',
                    time: '',
                    switchBoolean: false,
                }
            }
        },
        mounted: function () {
            const that = this;
            that.getRequestInfo();
            that.getInfo();
        },
        methods: {
            onSubmit() {
                const that = this;
                $.ajax({
                    type: "GET",
                    url: "/api/setTaskInfo",
                    data: {
                        switchBoolean: that.form.switchBoolean,
                        day: that.form.day
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200) {
                            that.$message({
                                message: '设置成功',
                                type: 'success'
                            });
                            that.getRequestInfo()
                        }
                    }
                });
            },
            getTime(n) {
                var D = new Date(n);
                var year = D.getFullYear();//四位数年份
                var month = D.getMonth() + 1;//月份(0-11),0为一月份
                month = month < 10 ? ('0' + month) : month;
                var day = D.getDate();//月的某一天(1-31)
                day = day < 10 ? ('0' + day) : day;
                var hours = D.getHours();//小时(0-23)
                hours = hours < 10 ? ('0' + hours) : hours;
                var minutes = D.getMinutes();//分钟(0-59)
                minutes = minutes < 10 ? ('0' + minutes) : minutes;
                var s = D.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                var now_time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ":" + s;
                return now_time;
            },
            getRequestInfo(val) {
                const that = this;
                $.ajax({
                    type: "GET",
                    url: "/api/taskInfo",
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200) {
                            that.form.time = that.getTime(res.data.time)
                            that.form.day = res.data.day
                            that.form.switchBoolean = res.data.switchBoolean
                        }
                    }
                });
            },
            getInfo() {
                const that = this;
                $.ajax({
                    type: "GET",
                    url: "/api/info",
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200) {
                            that.infos = res.data
                        }
                    }
                });
            },
        }
    })
</script>
